<template>
  <el-footer>
    <span>共{{ info.totalCount }}条记录&nbsp; 第 {{ info.pageIndex }}/{{ info.totalPage }}
      页</span>
    <el-pagination
      :total="Number(info.totalCount)"
      background
      layout="prev,next"
      :current-page="Number(info.pageIndex)"
      :page-count="Number(info.totalCount)"
      :page-size="Number(info.pageSize)"
      prev-text="上一页"
      next-text="下一页"
      @current-change="handleCurrentChange"
    />
  </el-footer>
</template>
<script>
export default {
  name: 'PageTool',
  props: {
    info: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.$emit('handleCurrentChange', val)
    }
  }
}
</script>

  <style scoped lang="scss">
    .el-footer {
    display: flex;
    width: 100%;
    height: 32px;
    justify-content: space-between;
    background: #fff;
    padding: 32px 16px;
    // margin-bottom: 32px;

    span {
    height: 28px;
    line-height: 28px;
    font-size: 16px !important;
    color: #dbdfe5 !important;
    }

    ::v-deep .btn-prev {
    width: 70px;
    height: 32px;
    margin: 0 16px;
    }
    ::v-deep .btn-next {
    width: 70px;
    height: 32px;
    margin: 0 16px;
    border-radius: 2px;
    background-color: #d5ddf8;
    }
    }
  </style>
